<template>
  <view class=" recent-trend-root" :style="fullStyle">
    <view class="banner">
      <top-back-image-container :image-path="`${baseFilePath}/home/recentTrends.png`"
                                :content-text="liaisonName"></top-back-image-container>
    </view>
    <view class="content">
      <!-- 搜索 begin -->
      <view class="search">
        <view class="search-select">
          <uni-data-select @change="reloadLiaisonNewsByKeyword(queryParams.keyword)" style="width: 100%"
                           v-model="queryParams.newsTag" :localdata="liaisonNewsTags"
                           placeholder="选择类别"></uni-data-select>
        </view>
        <view class="search-input-container">
          <search-input @change="queryAllContact" @query="reloadLiaisonNewsByKeyword"></search-input>
        </view>
      </view>
      <!-- 搜索 end -->
      <!-- 列表 begin -->
      <view class="content-item-1">
        <view v-show="liaisonNews != null && liaisonNews.length > 0" class="row">
          <view
              @click="goSubPage(`${liaisonNewItem.newsType == '1' ? contactTrendDetailPath :contactDynamicStatePath}?liaisonNewsId=${liaisonNewItem.id}`)"
              class="grid"
              v-for="(liaisonNewItem,liaisonNewIndex) in liaisonNews" :key="liaisonNewItem.id">
            <view class="img">
              <image :src="liaisonNewItem.newsCover"></image>
            </view>
            <view class="info">
              <view class="title title-content">
                {{ liaisonNewItem.newsTitle }}
              </view>
              <view class="tags">
                <view :style="{background:liaisonNewItem.newsTagColor}" class="tag-item ">
                  {{ liaisonNewItem.newsTagLabel }}
                </view>
                <view class="time">
                  {{ liaisonNewItem.lastTime }}小时前
                </view>
              </view>
            </view>
          </view>
        </view>
        <empty class="empty" v-show="liaisonNews == null || liaisonNews.length <= 0"></empty>
      </view>
      <!-- 列表 end -->
    </view>
  </view>

</template>

<script>
import searchInput from '@/compontent/searchInput'
import {QUERY_LIAISON_NEWS, QUERY_LIAISON_NEWS_TAGS} from "@/api/contact";
import {getFileAccessHttpUrl} from "@/until/fileUtil";
import {baseMixins} from "@/mixins/baseMixins";
import {baseFilePath, contactDynamicStatePath, contactTrendDetailPath} from "@/until/publicConfig";
import TopBackImageContainer from "@/compontent/topBackImageContainer/index.vue";
import {requestGet} from "@/until/means/request";
import empty from "@/compontent/empty/index.vue";
import {formtimestamp, friendlyDate} from "@/until/timeUtil";

export default {
  mixins: [baseMixins],
  components: {
    searchInput,
    TopBackImageContainer,
    empty
  },
  data() {
    return {
      queryParams: {
        keyword: '',
        liaisonId: '',
        newsTag: ''
      },
      liaisonName: '',
      liaisonNewsTags: [],
      liaisonNews: [],
      contactTrendDetailPath,
      contactDynamicStatePath
    }
  },
  onLoad(params) {
    this.queryParams.liaisonId = params.liaisonId
    this.liaisonName = params.liaisonName
    this.queryLiaisonNewsTags()
    this.reloadLiaisonNewsByKeyword(this.queryParams.keyword)
  },
  methods: {
    queryLiaisonNewsTags() {
      requestGet({url: QUERY_LIAISON_NEWS_TAGS}).then(res => {
        this.liaisonNewsTags = res?.map(tag => {
          let {tagName: text, id: value} = tag;
          return {text, value}
        }) || []
      })
    },
    reloadLiaisonNewsByKeyword(Keyword) {
      this.queryParams.keyword = Keyword;
      requestGet({url: QUERY_LIAISON_NEWS, data: this.queryParams}).then(res => {
        this.liaisonNews = res?.records?.map(liaisonNewItem => {
          liaisonNewItem.newsCover = liaisonNewItem.newsCover != null && liaisonNewItem.newsCover !== '' ? getFileAccessHttpUrl(liaisonNewItem.newsCover) : `${baseFilePath}/home/news-1.png`
          liaisonNewItem.newsTagLabel = liaisonNewItem.newsTag_dictText
          liaisonNewItem.lastTime = liaisonNewItem.publishTime != null && liaisonNewItem.publishTime !== '' ? friendlyDate(formtimestamp(liaisonNewItem.publishTime)) : ''
          return liaisonNewItem
        }) || []
      })
    },
    queryAllContact(Keyword) {
      if (!Keyword || Keyword === '') {
        this.reloadLiaisonNewsByKeyword(Keyword)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.recent-trend-root {
  overflow: auto;
  background-color: $bg-color-white;

  .content {
    padding: 0 30rpx;
    color: #222222;

    .search {
      display: flex;
      justify-content: space-between;

      .search-select {
        width: 35%;
        display: flex;
        align-items: center;

        /deep/ .uni-select {
          width: 100%;
          border-radius: 30rpx;
        }
      }

      .search-input-container {
        width: 60%;

        /deep/ .search-input {
          height: 70rpx;
        }
      }
    }

    .content-item-1 {
      display: flex;

      .grid {
        width: 100% !important;
      }

      .row {
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        width: 100%;

        .grid:last-child {
          border: none;
        }

        .grid {
          display: flex;
          flex-direction: unset;
          align-items: start;
          padding: 30rpx 0;
          // margin: 0 30rpx;
          border-bottom: 1rpx solid #c7c7c7;

          .img {
            width: 180rpx;
            height: 180rpx;
            margin-bottom: 0;

            image {
              overflow: hidden;
              width: 180rpx;
              height: 180rpx;
              margin-bottom: 0;
              border-radius: $border-radius-lg;
            }
          }

          .info {
            display: flex;
            flex-direction: column;
            height: 100%;
            // margin: 10rpx 0 10rpx 30rpx;
            margin-left: 30rpx;
            width: calc(100% - 210rpx);

            .title {
              margin-right: 15rpx;
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              align-items: center;
              margin-bottom: 30rpx;
            }


            .tags {
              display: flex;
              // width: max-content;
              flex-wrap: wrap;
              justify-content: space-between;

              .tag-item {
                display: flex;
                justify-content: center;
                align-items: center;
                color: #FFFFFF;
                border-radius: $border-radius-lg;
                font-size: 22rpx;
                padding: 10rpx 12rpx;
                margin: 6rpx;
                margin-right: 10rpx;
              }

              .time {
                display: flex;
                align-items: center;
                color: #ababab;
                font-size: 26rpx;
              }
            }
          }
        }
      }

      .empty {
        width: 100%;
        height: 750rpx;
      }
    }
  }
}
</style>
